<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>公告</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="btnBox">
                <div>
                    <el-button size="small" @click="addHandle">添加</el-button>
                </div>
                <!-- <div>
                    <el-select size="small" filterable v-model="companyId" placeholder="请选择指定查看推广公司">
                        <el-option :label="item.companyName" :value="item.companyId"
                            v-for="(item, index) in companyList" :key="index"></el-option>
                    </el-select>
                </div> -->
            <el-select size="small" v-model="searchType" placeholder="请选择查询的面向群体" @change="searchByType">
            <el-option v-for="item in searchTypeList" :key="item.value" :label="item.label":value="item.value">
            </el-option>
            </el-select>
            </div>
            <el-table :data="tableData" border style="width: 100%" height="626" @selection-change="selectChange">
                <el-table-column prop="noticeContent" label="公告内容"></el-table-column>
                <el-table-column prop="createdTime" label="创建时间"></el-table-column>
                <el-table-column prop="releaseTime" label="发布时间"></el-table-column>
                <el-table-column prop="userType" label="面向群体" width="120">
                    <template slot-scope="scope">
                        {{ scope.row.userType | getType }}
                    </template>
                </el-table-column>
                <el-table-column prop="joinId" label="指定推广公司" v-if="companyId == 1">
                    <template slot-scope="scope">
                        {{ scope.row.joinId | getCompany }}
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="120">
                    <template slot-scope="scope">
                        <el-tag size="small" v-if="scope.row.isRelease == '1'">已发布</el-tag>
                        <el-tag size="small" type="warning" v-else>未发布</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="分公司审核状态" width="120">
                    <template slot-scope="scope">
                        <el-tag size="small" v-if="scope.row.companyReview == 1   ">已审核</el-tag>
                        <el-tag size="small" type="warning" v-else>未审核</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="主公司审核状态" width="120">
                    <template slot-scope="scope">
                        <el-tag size="small" v-if="scope.row.mainCompanyReview == 1  ">已审核</el-tag>
                        <el-tag size="small" type="warning" v-else>未审核</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                    <div style="display: flex; justify-content: space-between; gap: 5px;">
                        <el-button size="small" icon="el-icon-edit"
                            @click="handle('edit', 'table', scope.row)">修改</el-button>
                        <!-- <el-button size="small" icon="el-icon-upload2"
                            @click="handle('up', 'table', scope.row)">发布</el-button> -->
                        <el-button size="small" icon="el-icon-download" v-if="scope.row.isRelease == '1'"
                            @click="handle('down', 'table', scope.row)">撤回</el-button>
                        <el-button size="small" icon="el-icon-download"
                            @click="review(scope.row)">审核</el-button>
                    </div>
                </template>
            </el-table-column>
            </el-table>
            <div class="paginationBox">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageNum" :page-sizes="[50, 100, 150]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="totalNum"></el-pagination>
            </div>
        </el-card>

        <!-- 添加弹窗 -->
        <el-dialog title="公告" :visible.sync="addialogVisible" width="32%" :before-close="closeAddDialog">
            <el-form :model="form" :inline="true" :rules="rules" ref="form" label-width="120px">
                <el-form-item label="公告内容" prop="noticeContent">
                    <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8 }" v-model="form.noticeContent"
                        placeholder="请输入公告内容" style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item label="发布时间" prop="releaseTime">
                    <el-date-picker v-model="form.releaseTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
                        size="small" style="margin-right: 16px;">
                    </el-date-picker>
                    <el-button size="small" @click="nowHandle">立即发布</el-button>
                </el-form-item>
                <el-form-item label="面向群体" prop="userType">
                    <el-radio-group v-model="form.userType" @change="selectType">
                        <el-radio :label="item.type" v-for="(item, index) in typeList" :key="index">{{ item.text
                            }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="指定推广公司" prop="joinId" v-if="form.userType == -2">
                    <el-select size="small" filterable v-model="form.joinId" placeholder="请选择指定查看推广公司">
                        <el-option :label="item.companyName" :value="item.companyId"
                            v-for="(item, index) in companyList" :key="index"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeAddDialog">取 消</el-button>
                <el-button type="primary" @click="submitAddDialog">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>

let that


import { addNotice, listNotice, releaseNotice ,reviewNotice} from '../../network/system'
import { getCompanyListNoPage } from '../../network/company'

export default {
    data() {
        return {
            tableData: [],
            searchType : '',
            searchTypeList:[{
                value: 3,
                label: '全部'
            },{
                value: -2,
                label: '推广公司'
                }, {
                value: -1,
                label: '所有用户'
                }, {
                value: 0,
                label: '普通会员'
                }, {
                value: 1,
                label: '会员'
                }, {
                value: 2,
                label: '推广员'
                }],
            addialogVisible: false,//弹窗
            form: {
                noticeContent: '',
                userType: 0,
                companyId: '',
                isRelease: 1,
                joinId: '',  //总部指定某一推广公司
                releaseTime: '', // 发布时间
            },
            companyId: sessionStorage.companyId,
            searchType: '选择公告面向群体',
            rules: {
                noticeContent: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                ],
                userType: [
                    { required: true, message: '请选择面向群体', trigger: 'change' },
                ],
                releaseTime: [
                    { required: true, message: '请选择发布时间', trigger: 'change' },
                ],
            },
            typeList: [
                {
                    type: 1,
                    text: '所有会员'
                },
                {
                    type: 0,
                    text: '所有普通用户'
                },
                {
                    type: -1,
                    text: '所有用户'
                },
            ],
            selectList: [],// 选择的视频

            editFlag: false,
            pageSize: 50,
            pageNum: 1,
            totalNum: 0,

            companyList: []

        };
    },
    methods: {

        // 获取当前时间
        nowHandle() {
            this.form.releaseTime = this.getNowDate()
            console.log(this.getNowDate());
        },

        addHandle() {
            this.addialogVisible = true
        },

        getList() {
            listNotice({
                page: this.pageNum,
                size: this.pageSize,
                companyId: this.companyId,
            }).then(res => {
                if (res.flag) {
                    console.log(res);
                    this.tableData = res.data.list
                    this.totalNum = res.data.total
                }
            })
        },
        searchByType(){
            listNotice({
                page: this.pageNum,
                size: this.pageSize,
                companyId: sessionStorage.companyId,
                flag: this.searchType
            }).then(res => {
                if (res.flag) {
                    console.log(res);
                    this.tableData = res.data.list
                    this.totalNum = res.data.total
                }
            })
        }
        ,
        review(obj){
            reviewNotice({
                noticeId : obj.noticeId,
                companyId: sessionStorage.companyId
            }).then(res=>{
                if(res.flag){
                    this.getList('search')
                }
            })
        }
        ,

        handle(flag, position, obj) {
            if (position == 'top' && this.selectList.length == 0) {
                this.$message.warning('请选择要操作的数据')
                return
            }

            if (position == 'top') {
                var ids = '';
                this.selectList.forEach(ele => {
                    ids += ele.noticeId + ','
                })
                releaseNotice({
                    ids,
                    status: flag == 'up' ? 1 : 0
                }).then(res => {
                    if (res.flag) {
                        this.$message.success('操作成功')
                        this.getList()
                    } else {
                        this.$message.warning('操作失败')
                    }
                })

            } else {
                if (flag == 'edit') {
                    this.editFlag = true
                    this.form = JSON.parse(JSON.stringify(obj))
                    console.log(this.form);
                    this.addialogVisible = true
                } else {
                    releaseNotice({
                        id: obj.noticeId,
                        status: flag == 'up' ? 1 : 0
                    }).then(res => {
                        if (res.flag) {
                            this.$message.success('操作成功')
                            this.getList()
                        } else {
                            this.$message.warning('操作失败')
                        }
                    })
                }

            }
        },

        selectType() {
            if (this.form.userType != -2) {
                this.form.joinId = ''
            }
        },
        selectChange(val) {
            this.selectList = val
        },

        submitAddDialog() {
            this.$refs.form.validate((valid) => {
                if (!valid) return
                var form = this.form;
                form.companyId = this.companyId

                console.log(form);

                // return
                addNotice(form).then(res => {
                    if (res.flag) {
                        this.$message.success('添加成功')
                        this.getList()
                        this.closeAddDialog()
                    } else {
                        this.$message.warning('添加失败')
                    }
                })
            });

        },
        // 关闭弹窗
        closeAddDialog() {
            this.addialogVisible = false
            this.$refs.form.resetFields();
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.getList()
        },
        handleCurrentChange(val) {
            this.pageNum = val;
            this.getList()
        },

        // 获取当前时间
        getNowDate() {
            var myDate = new Date;
            var year = myDate.getFullYear();
            var mon = myDate.getMonth() + 1;
            mon = mon < 10 ? '0' + mon : mon
            var date = myDate.getDate();
            date = date < 10 ? '0' + date : date
            var date1 = myDate.getDate() + 1;
            date1 = date1 < 10 ? '0' + date1 : date1
            var hours = myDate.getHours();
            hours = hours < 10 ? '0' + hours : hours
            var minutes = myDate.getMinutes();
            minutes = minutes < 10 ? '0' + minutes : minutes
            var seconds = myDate.getSeconds();
            seconds = seconds < 10 ? '0' + seconds : seconds
            return year + "-" + mon + "-" + date
        },
        getCompanyList() {
            getCompanyListNoPage().then(res => {
                if (res.flag) {
                    res.data.unshift({
                        companyId: 0,
                        companyName: '全部',
                    })
                    this.companyList = res.data
                }
            })
        },



    },
    created() {
        this.companyId = sessionStorage.companyId
        console.log(this.companyId);
        if (sessionStorage.companyId != 1) {
            this.typeList.unshift({
                type: 2,
                text: '推广员'
            })
        } else {
            // 总部
            this.typeList.unshift({
                type: -2,
                text: '推广公司'
            })
        }

        console.log(this.typeList);
        that = this
        this.getList()
        this.getCompanyList()
    },
    filters: {
        getType(val) {
            var name = '';
            that.typeList.forEach(ele => {
                if (ele.type == val) {
                    name = ele.text
                }
            })
            return name
        },

        getCompany(val) {
            console.log(val);
            var name = '';
            that.companyList.forEach(ele => {
                if (ele.companyId == val) {
                    name = ele.companyName
                }
            })

            return val == null ? '全部' : name
        }
    },
};
</script>

<style scoped>
.paginationBox {
    display: flex;
    align-content: center;
    justify-content: end;
    width: 100%;

}
</style>